<template>
	<i-timePicker zIndex="1000" :timeStrPick="timeStr" :tabBar="false" v-if="showTimer" v-model="showTimer"
		@confirm="confirm"></i-timePicker>
	<i-drawers bodyHeight="700rpx" v-model="showModal" :diySlot="true">
		<view class="select_bdy">
			<view class="bodys">
				<view class="body_title">
					工单状态
				</view>
				<view class="status_list">
					<view @click="selectStatus(item, index)" v-for="(item,index) in status_list"
						:class="{active: active === index}" class="status_item">
						{{item.label}}
					</view>
				</view>
				<view class="body_title">
					创建日期
				</view>
				<view class="timers">
					<text style="margin-left: 32rpx;" @click="showTimer = true">{{formData.fromDate || '开始日期'}}</text>
					<text>至</text>
					<text style="margin-right: 32rpx;">{{formData.endDate || '结束日期'}} </text>
				</view>
				<view class="buttons">
					<i-buttons radius="4" padding="18rpx 88rpx" size="32" color="#16161F" bgColor="#F3F4F5"
						@click="reset">重置</i-buttons>
					<view style="width: 20rpx;"></view>
					<i-buttons radius="4" padding="18rpx 88rpx" size="32" color="#fff" bgColor="#FB652E"
						@click="submit">确定</i-buttons>
				</view>
			</view>
		</view>
	</i-drawers>
	<view class="workOrderManager">
		<view class="search">
			<i-search @focus="showHistory = true" @blur="showHistory = false" @clear="clear" width="440rpx"
				@change="searchChange" v-model="formData.keyword" margin="none" bgColor="#fff"
				placeholder="车牌号/客户姓名/手机号搜索"></i-search>
			<view class="screens" @click="showSelect">
				<text
					:style="{color: (changeData.active || changeData.fromDate) ? '#FB652E ': '#16161F'}">{{(changeData.active || changeData.fromDate) ? '已筛选' : '筛选'}}</text>
				<image src="../../static/images/more_icon.png" mode=""></image>
			</view>
		</view>
		<i-historySearch type="historyWorkOrder" @change="historySearchs"
			v-if="showHistory && getStorage('historyWorkOrder')"></i-historySearch>
		<i-scrollList height="calc(100vh - 182rpx)" :total="pageData.total" :pageTotal="pageData.list.length"
			@more="more">
			<i-card top="24rpx" v-for="item in pageData.list" :key="item.id"
				@click="navTo('/pages/business/workOrderDetail?id='+ item.id, 'navigateTo')">
				<view class="card_body">
					<view class="card_R">
						<view class="title_vno">
							<text class="vno">{{item.vno}}</text>
							<text
								:style="{color: item.orderStatus === 0 ? '#16161F' : '#A0A0AD'}">{{item.orderStatus === 0 ? '已结算' : '已作废'}}</text>
						</view>
						<view class="title_name">
							<text v-if="item.customerName" style="margin-right: 20rpx;">{{item.customerName}}</text>
							<text>{{item.phone}}</text>
						</view>
						<view class="title_time">
							<text>{{item.createTime}}</text>
							<i-price>{{item.price || 0}}</i-price>
						</view>
					</view>
				</view>
				<view class="bot">
					<text v-for="i in item.detailList" :key="i.id">{{i.serviceName}}</text>
				</view>
			</i-card>
			<view v-if="skeleton" v-for="(item,index) in 8" :key="item" style="margin-top: 10px;">
				<i-skeleton top="32rpx" alignItems="flex-start" :rowsW="['100%', '80%', '60%', '40%']"
					:rowsH="['34rpx', '23rpx', '24rpx','34rpx',]" radius="64rpx" iconSize="64rpx" size="48rpx"
					height="240rpx" :rows="4"></i-skeleton>
			</view>
		</i-scrollList>
		<view class="flex_bottom" @click="navTo('/pages/business/billing', 'navigateTo')">
			<image src="../../static/images/add@2x.png"></image>
			开单
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import useStore from '../../stores/index'
	import { navTo, getStorage, setStorage, clearForm } from '../../utils/common';
	import { orderQuery } from '../../api/business';
	const store = useStore()

	const activeName = ref('筛选')
	const showHistory = ref(false)
	const showModal = ref(false)
	const skeleton = ref(true)
	const showTimer = ref(false)
	const active = ref(0)
	const timeStr = ref('')
	const changeData = reactive<any>({
		active: 0,
		timeStr: ''
	})


	const formData = reactive({
		"customerName": "",
		"endDate": "",
		"fromDate": "",
		"orderStatus": null,
		"phone": "",
		"tyjPageNum": 1,
		"tyjPageSize": 10,
		keyword: ''
	})
	const pageData = reactive({
		total: 0,
		list: []
	})

	const status_list = [
		{
			label: '全部',
			value: null
		},
		{
			label: '已结算',
			value: 0
		},
		{
			label: '已作废',
			value: 1
		},
	]

	const historySearchs = (e : string) => {
		formData.keyword = e
		clearData()
		getPageData()
	}
	const clear = () => {
		formData.keyword = ''
		clearData()
		getPageData()
	}
	const searchChange = () => {
		showHistory.value = false
		if (!formData.keyword) {
			return
		}
		const historyWorkOrder = getStorage('historyWorkOrder')
		if (!historyWorkOrder) {
			setStorage('historyWorkOrder', [formData.keyword])
			return
		} else {
			historyWorkOrder.unshift(formData.keyword)
			const set = (new Set(historyWorkOrder))
			setStorage('historyWorkOrder', [...set].slice(0, 6))
		}
		clearData()
		getPageData()
	}
	const getPageData = async () => {
		const data = await orderQuery(formData);
		pageData.list = pageData.list.concat(data.rows)
		pageData.total = data.total
		skeleton.value = false
	}

	const showSelect = () => {
		active.value = changeData.active
		formData.fromDate = changeData.fromDate
		formData.endDate = changeData.endDate
		timeStr.value = changeData.timeStr
		showModal.value = true
	}

	const more = () => {
		formData.tyjPageNum++
		getPageData()
	}

	const selectStatus = (item : { label : string, value : any }, i) => {
		formData.orderStatus = item.value
		activeName.value = item.label
		active.value = i
	}

	onShow(() => {
		clearData()
		getPageData()
	})
	const clearData = () => {
		pageData.list = []
		pageData.total = 0
		formData.tyjPageNum = 1
		skeleton.value = true
	}
	const submit = () => {
		showModal.value = false
		changeData.active = active.value
		changeData.fromDate = formData.fromDate
		changeData.endDate = formData.endDate
		changeData.timeStr = timeStr.value

		clearData()
		getPageData()
	}
	const reset = () => {
		formData.orderStatus = ''
		formData.fromDate = ''
		formData.endDate = ''
		timeStr.value = ''
		active.value = 0
		showModal.value = false
		activeName.value = '筛选'
		clearForm(changeData)
		clearData()
		getPageData()
	}
	const confirm = (e : { startTime : string, endTime : string }) => {
		formData.fromDate = e.startTime + ' 00:00:00'
		formData.endDate = e.endTime + ' 23:59:59'
		timeStr.value = `${e.startTime} 至 ${e.endTime}`
	}
</script>

<style lang="scss" scoped>
	.workOrderManager {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #f3f4f5;

		.search {
			width: calc(100% - 64rpx);
			margin: 0 auto;
			@include flexRS;
			height: 88rpx;

			.search_r {
				width: 72rpx;
				height: 72rpx;

				image {
					width: 72rpx;
					height: 72rpx;
				}
			}
		}

		.card_body {
			@include flexR;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #F0F0F2;
			align-items: flex-start;

			.image {
				width: 64rpx;
				height: 64rpx;
				margin-right: 24rpx;

				image {
					width: 64rpx;
					height: 64rpx;
				}
			}

			.card_R {
				@include flexC;
				width: 100%;

				.title_vno {
					@include dfont(28rpx);
					@include flexRS;
					margin-bottom: 8rpx;

					.vno {
						@include titlefont(28rpx);
					}
				}

				.title_name {
					@include dfont(26rpx);
					@include flexR;
					margin-bottom: 8rpx;
					color: #5C6D80;
				}

				.title_time {
					@include dfont(26rpx);
					@include flexRS;
					color: #A0A0AD;
				}
			}
		}

		.bot {
			margin-top: 20rpx;
			@include dfont(26rpx);
			@include overflow;

			text {
				white-space: nowrap;
				color: #A0A0AD;
				margin-right: 32rpx;
			}
		}

	}

	.bodys {
		width: calc(100% - 64rpx);
		margin: 0 auto;

		.body_title {
			@include titlefont(28rpx);
			margin-bottom: 24rpx;
		}

		.status_list {
			@include flexRS;
			margin-bottom: 40rpx;

			.status_item {
				padding: 20rpx 72rpx;
				background: $background-color;
				border-radius: 16rpx;
				@include flexRC;
				@include dfont(28rpx);
				white-space: nowrap;
				border: 2rpx solid #F3F4F5;
			}

			.active {
				transition: all .3s ease-out;
				border: 2rpx solid #FB652E;
				color: #FB652E;
				background: rgba(251, 101, 46, 0.1);
			}
		}

		.timers {
			@include flexRS;
			justify-content: space-around;
			height: 80rpx;
			background: $background-color;
			border-radius: 16rpx;
			margin-bottom: 200rpx;

			text {
				@include dfont;
				color: #A0A0AD;
			}
		}

		.buttons {
			width: 100%;
			@include flexRC;
		}
	}
</style>